<!DOCTYPE head PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page info="Page hello.jsp"%>
<%@ page pageEncoding="windows-1251"%>
<%@ page contentType="text/html; charset=windows-1251"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<title>Spring Application</title>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
.center {
	text-align: center;
}

.test {
	color: red;
}

#a {
	background-color: black;
	color: silver;
}

#b {
	background-color: gray;
}

#c {
	background-color: gray;
	color: lime;
}

body {
	background-color: gray;
	color: black;
}
</style>

<script type="text/javascript">
	$(document).ready(
		function() {
			setTimeout(function() {
				window.location = "index.jsp";
			}, 60000);

		});
	
	function onAnswer() {
		var answerID = $(".questionClass input:checked").attr("id");
		
		var $questionDiv = $(".questionClass");
		//$.post("result.page", {questionID : $questionID.attr("id"), answerID : answerID} );
		//window.location="result.html?questionID="+$questionID.attr("id")+"&answerID="+answerID;
		
		$.ajax({
			url : "result.html",
			data : "questionID="
					+ $(".questionClass").attr("id")
					+ "&answerID="
					+ answerID,
			//data: ({questionID : $questionID.attr("id"), answerID : answerID}),
			success : function(html) {
				// shit-code :)
				// ajax uses for refresh some part of page but not full page
				// use @ResponseBody in controller annotation and JSON
				// refresh only '.questionClass' div
				$("#body").html("");
				$("#body").append(html);
				//$("#result").append(html);
			}
		});
	}
</script>
</head>
<body>
	<div id="result">
		<div id="${questionsObject.ID}" class="center questionClass">
			<div>${questionsObject.question}</div>
			<c:forEach items="${questionsObject.answers}" var="answer">
				<div class="center" style="display: block;">
					<input type="checkbox" id="${answer.ID}"> ${answer.answer}
				</div>
			</c:forEach>
		</div>
		<div>
			<input type="button" id="answerButton" value="Answer" onclick="onAnswer()"/>
		</div>
		<div>
			<b>You have 1 minute to answer all questions</b>
		</div>
	</div>

	<div id="c">
		<a href="index.jsp"> <b> End test(on main page) </b></a>
		<!-- <a href="result.html?questionID=1&answerID=1"> result</a>  -->
	</div>


	<%--
	<p></p>
	<a href="index.jsp"><b>ON MAIN PAGE</b></a>
	--%>

</body>

</html>